import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import style from './style.less'
import { Layout, Menu, Icon } from 'antd'
import ConnentTop from '../../components/ConnentTop'
import PageHeader from '../../components/PageHeader'
import {setHistory} from '../../actions/history'
const { SubMenu } = Menu
const { Header, Content, Sider } = Layout

class Wrap extends React.Component {
  static propTypes = {
    children: PropTypes.any,
  }
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

@connect((state) => {
  return {}
})
@withRouter
class Layout$ extends Component {
  static propTypes = {
    children: PropTypes.element,
    className: PropTypes.string,
    history: PropTypes.object,
    location: PropTypes.object,
    state: PropTypes.object,
    dispatch: PropTypes.func,
  }

  state = {
    params: [],
  }

  static Wrap = Wrap

  tipTags = (value) => {
    // console.log(value)
    const keyPath = value.keyPath
    const topName = value.item.props.children
    this.props.history.push(`/${keyPath[1]}/${keyPath[0]}`, {page: keyPath[1], key: keyPath[0], topName})
  }
  componentWillMount() {
    this.props.dispatch(setHistory({...this.props.history}))
  }
  render() {
    // console.log(this.props)
    const state = this.props.location.state || {}
    return (
      <div className={`${style.Wrap} ${this.props.className}`}>
        <Layout className={style.layputBox}>
          <Header style={{backgroundColor: 'rgb(57, 185, 149)'}} className={style.header}>
            <PageHeader />
          </Header>
          <Layout className={style.middleContent}>
            <Sider width={200} className={style.sider}>
              <Menu
                mode="inline"
                defaultOpenKeys={[`${state.page}`]}
                defaultSelectedKeys={[`${state.key}`]}
                className={style.menu}
                theme="light"
                onClick={this.tipTags}
              >
                <SubMenu key="home" title={<span><Icon type="home" />首页</span>}>
                  <Menu.Item key="system">系统首页</Menu.Item>
                  <Menu.Item key="seeting">账户设置</Menu.Item>
                  <Menu.Item key="logs">登录日志</Menu.Item>
                  <Menu.Item key="operate">操作日志</Menu.Item>
                </SubMenu>
                <SubMenu key="CRM" title={<span><Icon type="laptop" />CRM</span>}>
                  <Menu.Item key="clueSystem">线索管理</Menu.Item>
                  <Menu.Item key="resourceSystem">资源管理</Menu.Item>
                  <Menu.Item key="myClue">我的线索</Menu.Item>
                  <Menu.Item key="myClient">我的客户</Menu.Item>
                  <Menu.Item key="internationSystem">公海管理</Menu.Item>
                  <Menu.Item key="clientSystem">客户管理</Menu.Item>
                </SubMenu>
                <SubMenu key="personnel" title={<span><Icon type="paper-clip" />人事管理</span>}>
                  <Menu.Item key="PermissionSystem">权限管理</Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            <Layout>
              <Content className={style.content}>
                <ConnentTop name={state.topName} />
                {this.props.children}
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    )
  }
}

export default Layout$
